<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <Table :request-data="requestData" v-on:list="listHander" ref="table">
        <template slot="search-box">
          <el-form-item label="游戏列表" style="font-weight: bold;"></el-form-item>
        </template>
        <template slot="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tabs type="border-card">
                  <el-tab-pane label="游戏设置" class="main-h-center">
                    <div style="width:460px">
                      <el-form label-width="100px">
                        <el-form-item label="游戏名称">
                          <el-input v-model="scope.row.name" placeholder="用来在客户端显示"></el-input>
                        </el-form-item>

                        <el-form-item label="游戏编号">
                          <el-input v-model="scope.row.code" placeholder="游戏唯一编号" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="游戏图标">
                          <el-input v-model="scope.row.icon" disabled placeholder="应该是64*64的大小的图片">
                            <el-upload
                              slot="append"
                              :action="$baseUrl+'/upload/image'"
                              :headers="headers"
                              :multiple="false"
                              :show-file-list="false"
                              :on-error="handleUploadError"
                              :on-success="handleUploadIconSuccess"
                            >
                              <el-button
                                size="small"
                                icon="el-icon-upload"
                                @click="setCurrentIndex(scope.$index)"
                              >上传</el-button>
                            </el-upload>
                          </el-input>
                        </el-form-item>

                        <el-form-item label="游戏详情">
                          <el-input
                            v-model="scope.row.home_page "
                            disabled
                            placeholder="应该是一个html文档"
                          >
                            <el-upload
                              slot="append"
                              :action="$baseUrl+'/upload/html'"
                              :headers="headers"
                              :multiple="false"
                              :show-file-list="false"
                              :on-error="handleUploadError"
                              :on-success="handleUploadHtmlSuccess"
                            >
                              <el-button
                                size="small"
                                icon="el-icon-upload"
                                @click="setCurrentIndex(scope.$index)"
                              >上传</el-button>
                            </el-upload>
                          </el-input>
                        </el-form-item>
                        <el-form-item label="应用名称">
                          <el-input v-model="scope.row.app_name" placeholder="用来在客户端查找并启动游戏"></el-input>
                        </el-form-item>
                        <el-form-item label="游戏状态">
                          <el-select placeholder="请选择游戏状态" v-model="scope.row.status">
                            <el-option label="正常运营" :value="1"></el-option>
                            <el-option label="停止运营" :value="0"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="handleUpdate(scope.$index)">保存修改</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="客户端相关" class="main-h-center">
                    <div style="width:460px">
                      <el-form label-width="100px">
                        <el-form-item label="软件版本">
                          <el-input v-model="scope.row.version"></el-input>
                        </el-form-item>
                        <el-form-item label="下载地址">
                          <el-input v-model="scope.row.down_url"></el-input>
                        </el-form-item>
                        <el-form-item label="强制更新">
                          <el-select placeholder="请选择" v-model="scope.row.is_up">
                            <el-option label="是" :value="true"></el-option>
                            <el-option label="否" :value="false"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="handleUpdate(scope.$index)">保存修改</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="更新日志" class="main-h-center">
                    <div style="width:600px">
                      <el-form label-width="0">
                        <el-form-item label>
                          <el-input type="textarea" :rows="9" v-model="scope.row.up_log"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            style="float:right"
                            @click="handleUpdate(scope.$index)"
                          >保存修改</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="游戏公告" class="main-h-center">
                    <div style="width:600px">
                      <el-form label-width="0">
                        <el-form-item label>
                          <el-input type="textarea" :rows="9" v-model="scope.row.notice"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            style="float:right"
                            @click="handleUpdate(scope.$index)"
                          >保存修改</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </el-table-column>
            <el-table-column label="添加时间">
              <template slot-scope="scope">
                <span>{{$utils.formatDateTime(scope.row.add_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="游戏图标" width="100">
              <template slot-scope="scope">
                <el-avatar
                  style="margin-top:6px;"
                  shape="square"
                  size="medium"
                  fit="fill"
                  :src="$baseUrl+'/upload/image/'+scope.row.icon"
                ></el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="游戏名称"></el-table-column>
            <el-table-column prop="code" label="游戏编号"></el-table-column>

            <el-table-column label="游戏状态">
              <template slot-scope="scope">
                <span>{{ scope.row.status==1?'正常使用':'停止使用'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="详情页面">
              <template slot-scope="scope">
                <el-link
                  :href="$baseUrl+'/upload/html/'+scope.row.home_page"
                  target="_blank"
                  :underline="false"
                  type="primary"
                >立即查看</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="version" label="软件版本"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  round
                  @click="handleRemove(scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
import Keycard from "./components/Keycard.vue";
import { log } from "util";
export default {
  components: {
    Table,
    Keycard
  },
  data() {
    return {
      isLoaded: false,
      currentIndex: -1,
      headers: {
        Authorization: "Bearer " + localStorage.getItem("higame-token")
      },
      requestData: {
        urlPath: "/game/list",
        postData: {
          pageNum: 1,
          pageSize: 20
        }
      },
      tableData: []
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
    setCurrentIndex(index) {
      this.currentIndex = index;
    },
    async handleRemove(index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/game/delete", {
          _id: this.tableData[index]._id
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData.splice(index, 1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    async handleUpdate(index) {
      if (this.$utils.isNullOrEmpty(this.tableData[index].name)) {
        this.$message.error("软件名称不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.tableData[index].code)) {
        this.$message.error("软件编号不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.tableData[index].icon)) {
        this.$message.error("软件图标不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.tableData[index].home_page)) {
        this.$message.error("软件详情页面不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.tableData[index].app_name)) {
        this.$message.error("软件启动应用名称不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.tableData[index].version)) {
        this.$message.error("软件版本号不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.tableData[index].down_url)) {
        this.$message.error("软件下载地址不能为空！");
        return;
      }
      await this.$confirm("此操作将会修改数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/game/update", this.tableData[index])
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleUploadError(err, file, fileList) {
      this.currentIndex = -1;
      this.$message.error(err.toString());
    },
    handleUploadIconSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$message({
          message: "上传成功！",
          type: "success"
        });
        this.tableData[this.currentIndex].icon = res.data;
      } else {
        this.$message.error(res.msg);
      }
      this.currentIndex = -1;
    },
    handleUploadHtmlSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$message({
          message: "上传成功！",
          type: "success"
        });
        this.tableData[this.currentIndex].home_page = res.data;
      } else {
        this.$message.error(res.msg);
      }
      this.currentIndex = -1;
    },
    search() {
      this.$refs.table.init();
    }
  },
  created() {}
};
</script>
<style>
</style>



